<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'start.jsp' starting page</title>
    <meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="total.css">

  </head>
  <style>
<!--

-->
html, body {
  height: 100%;
  overflow: hidden;
 position: relative;
}
body {
width:100%;
height: 100%;
background-image: url("bk3.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
}
.df{
width: 7%;
height: 35%;
position: absolute;
/* border: 1px solid #000; */
right: 7%;
top: 20%;
}
.btd{
width: 60%;
height: 24%;
text-align: center;
font-size: 1em;
margin-top: 30%;
transform:rotate(45deg);
border:1px solid #000;
}
.btd a{
display: block;
color: #000;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.botm{
width: 100%;
height: 7%;
border: 1px solid #000;
background-color: rgba(224,224,224,.5);
position: absolute;
bottom: 0px;

}
.botm_btn{
width: 10%;
height: 20%;
margin: auto;
border: 1px solid #000;

}
.botm_group{
width: 70%;
height: 75%;
border: 1px solid #000;
margin: 4px	 auto;
background-color: rgba(204,204,204,.3);
}
.botm_group input[type='text']{
padding-left: 5%;
width: 60%;
height: 80%;
background-color: #FFF;
border: 2px solid rgba(204,204,204,.3);
margin-top: 5px;
font-size:20px;
}
.botm_group input[type='text']:focus{
border: 2px solid rgba(255,255,204,.7);
}
.botm_group input[type='button']{
background-color: rgba(204,204,204,.3);
border: 2px solid rgba(204,204,204,.3);
margin-right: 5px;
}
.wachat{
width: 30%;
height: 30%;
/* border: 1px solid #000; */
}
.lightBorder{
display: block;
width: 12%;
height: 12%;
}
.top{
width: 100%;
height: 7%;
border: 1px solid #000;
position: absolute;
}
	.scroll{
	position: absolute;
	width:80%;
	height: 100%;
	overflow: hidden;
	float: left;
	}
	.scroll span{
	display: block;
	margin:5px auto;
	width: 60%;
	height:80%;
	border: 1px solid #000;
	text-align: center;
	}
	.QC{
	width: 5%;
	height: 100%;
	float: right;
	margin-right: 10%;
	background-image: url("img/sbtn.png");
	background-position: center;
	background-repeat: no-repeat;
	}
	.QC ul {
	display: block;
	width: 5%;
	height: 98%;
	margin: 0;
	padding: 0;
	position: absolute;	
}
.QC li {
	display: block;;
	width: 300px;
	height: 300px;
	left: -300px;
	/* border: 1px solid #000; */
	position: relative;
}
.QC a{
	color: #000;
	text-decoration: none;
	font-size: 1em;
}
</style>
  <body>
  <div class="top">
  	<div class="scroll">
	<span>滚动条1</span>
	<span>滚动条2</span>
	<span>滚动条3</span>
	<span>滚动条4</span>
	</div>

	<div class="QC">
	<a href="javascript:void(0)">
		<ul>
		<li>
		<div class="wachat" id="wachat">
	  
	  	</div
		</li>
		</ul>
	</a>

	</div>

  </div>
<!--   <div class="wachat" id="wachat">
  
  </div> -->
  
  <div class="df">
  <div class="btd"><a href="javascript:void(0)">1</a></div>
  <div class="btd"><a href="javascript:void(0)">2</a></div>
  <div class="btd"><a href="javascript:void(0)">3</a></div>
  <div class="btd"><a href="javascript:void(0)">4</a></div>
  </div><!-- 右侧菜单 -->
  
  <div class="botm">
  	<div class="botm_btn"></div>
  	<div class="botm_group">
  	<input type="text" name="mes" class="txt" placeholder="弹幕最多输入30个......">
  	<input type="button" class="button_ita" name="send" onclick="send()" value="发送" >
  	<input type="button" class="button_ita" value="其他">
  	</div><!-- 发送弹幕的各种组件的组合款 -->
  </div><!-- 下侧可隐藏菜单发送卡 -->
  </body>
  <script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $("li").css("top",$("ul").height());
  $("li").css("display","none");
	 $("ul").on("click",function(){
		$("li").slideDown(1500);
	 });
	 $("ul").on("mouseleave",function(){
		//$("li").slideUp(1500);
	 });
  
    for(var n=0;n<$("span").size();n++){
  	//alert(n);
  	scroll(n);
  }

  	function scroll(i){
  	// setTimeout(function(){$("span:eq("+i+")").slideUp(1000);},3000*n);
  	// setTimeout(function(){$(".scroll").append("<span>滚动条3</span>");},3000*n);
  	}
  	var hi=$(".botm_btn").height()+5;
  	$(".botm_btn").css("margin-top","-"+hi);
  	$(".botm_btn").click(function(){
  		if($(".botm").css("bottom")=="0px"){
  		$(".botm").animate({bottom:"-7%"});
  		}else{
  		$(".botm").animate({bottom:"0%"});
  		}
  	});//底部的显示与隐藏
  $("a").click(function(){
  	var str=$(this).html();
  	$("body").css("backgroundImage","url('bk"+str+".png')")
  	//alert(str);
  });
  function send(){
  var message=$("input[name='mes']").val();
  if(message==""){
  	alert("请输入内容");
  }else{
  	$("input[name='mes']").val("");
  	alert("已发送");
  }
  }
  
  var num=0;
  var max=6;
  var i=20;//等待时间
  $("input[name='send']").click(function(){
  if(num<max){
  console.log("操作"+num);
  }else{
  $("input[name='send']").val("休息一下");
  $("input[name='send']").attr("disabled","disabled");
  console.log("暂停");
  }
  num++;
  });
  setInterval(function(){
  num=0;
  $("input[name='send']").attr("disabled",false);
  $("input[name='send']").val("发送");
  },i*1000);
  
  /* 微信相关 */
   var obj = new WxLogin({
 self_redirect:false,//当前域名跳转，还是停留
 id:"wachat", 
 appid: "wx8023b951238c0709", 
 scope: "snsapi_login", 
 redirect_uri: "http%3a%2f%2fwww.aiyouei.com%2f123%2fbackground.html",
  state: "state",
 style: "black",
 href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lfQ0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="
 });
 console.log(obj);
 
  </script>
</html>
